<template>
  <label :for="label" class="m-radio" :class="{disabled: disabled}">
    <input type="radio" ref="radio"
      :name="name" 
      :value="label"
      :id="label"
      :disabled="disabled"
      @click="$emit('input', $event.target.value)">
    <span class="radio-btn"></span>
    <slot></slot>
  </label>
</template>

<script>
  export default {
    props: {
      value: {
        type: [String, Number, Boolean],
        deufult: ''
      },
      label: {
        type: [String, Number],
        default: ''
      },
      name: {
        type: String,
        deufult: null
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      if (this.value == this.label) {
        this.$refs.radio.checked = true
      }
    },
    updated() {
      if (this.value == this.label) {
        this.$refs.radio.checked = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
  .m-radio {
    display: inline-block;
    cursor: pointer;
    &.disabled {
      cursor: not-allowed;
      color: #999;
    }
    .radio-btn {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 5px;
      border: 1px solid #bfcbd9;
      background: #f1f1f1;
      border-radius: 8px;
      vertical-align: middle;
    }
    input {
      width: 0;
      height: 0;
      opacity: 0;
      &:checked + .radio-btn {
        transition: all .2s;
        border-color: $color-main;
        box-shadow: inset 0 0 0 4px $color-main;
      }
    }
  }
</style>